<template>
	<div class="product-inventory">
	  <el-card>
		<div class="toolbar">
		  <el-input
			v-model="filters.keyword"
			placeholder="成品名称/批次号"
			clearable
			style="width:200px"
			@input="filterData"
		  />
		  <el-select
			v-model="filters.type"
			clearable
			placeholder="成品类型"
			style="width:160px"
			@change="filterData"
		  >
			<el-option v-for="type in typeList" :key="type" :label="type" :value="type" />
		  </el-select>
		</div>
		<!-- 成品库存列表 -->
		<el-table
		  :data="filteredData"
		  border
		  stripe
		  size="small"
		  style="width:100%;margin-bottom:18px;"
		  highlight-current-row
		  @current-change="onCurrentChange"
		>
		  <el-table-column prop="productNo" label="成品编号" width="120"/>
		  <el-table-column prop="productName" label="成品名称" width="140"/>
		  <el-table-column prop="type" label="类型" width="110"/>
		  <el-table-column prop="batchNo" label="批次号" width="110"/>
		  <el-table-column prop="unit" label="单位" width="60"/>
		  <el-table-column prop="quantity" label="现存量" width="90">
			<template #default="scope">
			  <el-tag :type="scope.row.quantity < 100 ? 'danger' : 'success'">
				{{ scope.row.quantity }}
			  </el-tag>
			</template>
		  </el-table-column>
		  <el-table-column prop="inDate" label="入库日期" width="120"/>
		  <el-table-column prop="outDate" label="出库日期" width="120"/>
		  <el-table-column prop="warehouse" label="仓库"/>
		</el-table>
		<!-- 成品库存趋势图 -->
		<div style="padding:12px 0;">
		  <div style="font-weight:bold;margin-bottom:8px;">
			库存趋势（{{ selectedProductName || '全部' }})
		  </div>
		  <div ref="chartRef" style="width:100%;height:320px;"></div>
		</div>
	  </el-card>
	</div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'
  
  // 成品库存数据模拟
  const productData = ref([
	{ productNo: 'PRD-001', productName: '头孢曲松钠注射液', type: '注射剂', batchNo: '202406A', unit: '箱', quantity: 420, inDate: '2024-06-01', outDate: '2024-06-10', warehouse: '成品库A' },
	{ productNo: 'PRD-002', productName: '阿莫西林胶囊', type: '胶囊剂', batchNo: '202406B', unit: '箱', quantity: 150, inDate: '2024-06-03', outDate: '2024-06-13', warehouse: '成品库B' },
	{ productNo: 'PRD-003', productName: '葡萄糖注射液', type: '注射剂', batchNo: '202406C', unit: '箱', quantity: 90, inDate: '2024-06-05', outDate: '2024-06-15', warehouse: '成品库A' },
	{ productNo: 'PRD-004', productName: '布洛芬缓释胶囊', type: '胶囊剂', batchNo: '202406D', unit: '箱', quantity: 80, inDate: '2024-06-06', outDate: '2024-06-20', warehouse: '成品库B' },
	{ productNo: 'PRD-005', productName: '维生素C片', type: '片剂', batchNo: '202406E', unit: '箱', quantity: 520, inDate: '2024-06-02', outDate: '2024-06-09', warehouse: '成品库A' },
	{ productNo: 'PRD-006', productName: '氯化钠注射液', type: '注射剂', batchNo: '202406F', unit: '箱', quantity: 310, inDate: '2024-06-08', outDate: '2024-06-18', warehouse: '成品库C' }
  ])
  const typeList = ['注射剂', '胶囊剂', '片剂']
  
  const filters = ref({
	keyword: '',
	type: ''
  })
  
  const filteredData = computed(() => {
	return productData.value.filter(item => {
	  const matchKeyword =
		!filters.value.keyword ||
		item.productName.includes(filters.value.keyword) ||
		item.batchNo.includes(filters.value.keyword)
	  const matchType = !filters.value.type || item.type === filters.value.type
	  return matchKeyword && matchType
	})
  })
  
  // 当前选中成品名称，控制下方趋势图切换
  const selectedProductName = ref('')
  function onCurrentChange(row) {
	selectedProductName.value = row ? row.productName : ''
  }
  
  // 库存趋势模拟数据
  const allTrend = {
	'头孢曲松钠注射液': [
	  { date: '2024-06-01', quantity: 500 },
	  { date: '2024-06-05', quantity: 430 },
	  { date: '2024-06-10', quantity: 420 }
	],
	'阿莫西林胶囊': [
	  { date: '2024-06-03', quantity: 180 },
	  { date: '2024-06-08', quantity: 170 },
	  { date: '2024-06-13', quantity: 150 }
	],
	'葡萄糖注射液': [
	  { date: '2024-06-05', quantity: 100 },
	  { date: '2024-06-10', quantity: 95 },
	  { date: '2024-06-15', quantity: 90 }
	],
	'布洛芬缓释胶囊': [
	  { date: '2024-06-06', quantity: 120 },
	  { date: '2024-06-15', quantity: 110 },
	  { date: '2024-06-20', quantity: 80 }
	],
	'维生素C片': [
	  { date: '2024-06-02', quantity: 600 },
	  { date: '2024-06-06', quantity: 560 },
	  { date: '2024-06-09', quantity: 520 }
	],
	'氯化钠注射液': [
	  { date: '2024-06-08', quantity: 350 },
	  { date: '2024-06-13', quantity: 330 },
	  { date: '2024-06-18', quantity: 310 }
	]
  }
  
  function getTrendData() {
	if (selectedProductName.value && allTrend[selectedProductName.value]) {
	  return allTrend[selectedProductName.value]
	}
	// 如果没有选中则全部合并
	let dateMap = {}
	Object.values(allTrend).forEach(arr => {
	  arr.forEach(({ date, quantity }) => {
		if (!dateMap[date]) dateMap[date] = 0
		dateMap[date] += quantity
	  })
	})
	// 汇总后转为数组
	return Object.entries(dateMap)
	  .map(([date, quantity]) => ({ date, quantity }))
	  .sort((a, b) => a.date.localeCompare(b.date))
  }
  
  function filterData() {
	// 只用来联动刷新表格和图表
	renderChart()
  }
  
  const chartRef = ref()
  let chart
  function renderChart() {
	if (!chart && chartRef.value) chart = echarts.init(chartRef.value)
	if (!chart) return
	const trend = getTrendData()
	chart.setOption({
	  tooltip: { trigger: 'axis' },
	  grid: { left: 36, right: 18, bottom: 32, top: 40, containLabel: true },
	  xAxis: {
		type: 'category',
		data: trend.map(d => d.date)
	  },
	  yAxis: { type: 'value' },
	  series: [
		{
		  name: '库存数量',
		  type: 'line',
		  smooth: true,
		  data: trend.map(d => d.quantity),
		  lineStyle: { width: 3, color: '#409EFF' },
		  symbol: 'circle',
		  areaStyle: { color: '#d5e8fa' }
		}
	  ]
	})
  }
  
  onMounted(() => {
	setTimeout(renderChart, 10)
  })
  watch(filteredData, renderChart)
  watch(selectedProductName, renderChart)
  </script>
  
  <style scoped>
  .product-inventory {
	padding: 16px;
  }
  .toolbar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 6px;
	flex-wrap: wrap;
  }
  </style>
  